<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				
				/**
				 * 块元素在文档流中默认垂直排列，所以三个div自上至下依次排开
				 * 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
				 *
				 * 使用float来使元素浮动，从而脱离文档流
				 * 可选值：
				 *		none，默认值，元素在文档流中排列
				 *		left，元素会立即脱离文档流，向页面的左侧浮动
				 *		right，元素会立即脱离文档流，向页面的右侧浮动
				 * 
				 * 当设置了float一个非none值，元素会立即脱离文档流，下面的元素会顶上来
				 * 元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素边框或者其他浮动元素
				 *
				 * 如果浮动元素上边是一个没有浮动的元素，则浮动元素不会超过块元素
				 *
				 * 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
				 * 
				 * 浮动的元素，不会遮挡文字，文字会自动环绕在浮动元素的周围，
				 * 所以可以通过浮动来设置文字环绕图片效果
				 *
				 * 文档流中，子元素宽度默认占父元素全部，当设置浮动后，块元素脱离文档流，高度和宽度都会被内容撑开，宽度不再是默认值时的父元素宽度
				 *
				 */
				float: left;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
				color: #FFFFFF;
			}
			.box3{
				width: 100px;
				height: 100px;
				background-color: green;
				float: left;
			}
			/* .p1{
				background-color: yellow;
			} */
			.s1{
				/**
				 * 开启span的浮动
				 * 内联元素脱离文档流后，会变成块元素，设置宽高就起作用了。
				 */
				float: left;
				width: 100px;
				height: 100px;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<p class="p1">
			谷歌正在效仿苹果，要强制执行安卓应用内购买抽成30%的政策，这对于开发商而言绝对不是个好消息。
			据外媒报道称，谷歌已经明确表示，将从明年开始执行应用商店规则，该规则要求在GooglePlay商店上分发Android应用的开发者使用谷歌应用内支付系统。
			谷歌为应用开发商留出了一年的时间来调整，最后截止日期为2021年9月30日。届时，应用开发商将必须使用谷歌的支付系统，不能再使用其独立支付系统，其应用内购买收入将被谷歌抽取30%的分成。
			按照谷歌的说法，现有政策也要求应用开发商在应用内购买交易上使用谷歌支付系统，但一直没有执行。
			因为抽成30%，EpicGames公然和苹果叫板，这导致《堡垒之夜》被火速下架，而这件事情背部则是开发商不满苹果过高的抽成，而现在安卓也要加入这个队伍中来，势必会引起更多开发商的不满。
			有行业人士直言，虽然安卓是开源系统，不过谷歌正在效仿苹果，对它的管控越来越严格，这样可以获得更多的收益和控制权。
		</p>
		<span class="s1">hello span</span>
	</body>
</html>
